<template>
  <view class="page-container"> 
    <view class="content">
      <image src="/static/logo.png" mode="widthFix"></image>
      <view v-if="!raining">今天天气真好</view>
      <view v-if="state === 'vue'">state的值是 Vue</view>
      <view>State is vue</view>
      <view>uni-app</view>
    </view>
    <view class="container">
      <view>{{ message }}</view>
      <button @click="handleClick">点击我</button>
      <view v-if="showContent">条件判断显示的内容</view>
      <view v-for="(item, index) in list" :key="index">
        {{ index + 1 }}. {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello uni - app",
      showContent: true,
      list: [
        { id: 1, name: "uni - app" },
        { id: 2, name: "HTML" }
      ],
      raining: false,
      state: "vue"
    };
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: "点击事件触发",
        icon: "none"
      });
    }
  }
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  padding: 20px;
}

.content {
  text-align: center; 
  margin-bottom: 30px; 
}

.container {
  width: 100%; 
  max-width: 600px; 
  text-align: center; 
  padding: 20px;
  border-bottom: 1px solid #eee;
}

button {
  margin: 10px 0;
}

image {
  width: 100px;
  height: auto;
  margin-bottom: 10px;
  display: inline-block;
}
</style>
